<!--
  @anthor: darker&&DL,
  @description: 选人组件，基于elementUi的tree和el-scrollbar，el-pagination等组件进行二次封装，用于选择某组织下面的党员，简化开发
  @date: 2020 / 07 / 27,
  @remark:
 -->
<!--
 引用示例：
   <choiceUser ref="choice" :showBtn="false" @callBack="getChoiceUser"></choiceUser>
   showBtn:控制按钮是否显示
   choiceSingle:控制选人是否单选  true：单选 false 双选  默认false 
  @callBack: 选人回调函数，传递一个选中人的数据到父组件
  -->
<template>
  <div>
    <el-button @click="choiceManOn()" v-show="showBtn" size="small"
      >点击选组织/人员</el-button
    >
    <div v-if="showBtn">
      <el-tag
        @close="handleClose(tag)"
        v-for="(tag, index) in value"
        :key="index"
        closable
        size="medium"
        >{{ tag.label }}</el-tag
      >
    </div>
    <div v-if="showState" class="lump">
      <div class="choice_box">
        <div class="clearfix top_tips">
          <p class="fl tips">选择人员</p>
          <p @click="choiceManOn()" class="fr">
            <i class="el-icon-close"></i>
          </p>
        </div>
        <div class="clearfix bot_bot">
          <div class="fl tree_box">
            <tree
              :spanState="spanState"
              ref="thisTree"
              class="choice_tree"
              @nodeClick="nodeClick"
            ></tree>
          </div>
          <div class="fr table_box" style>
            <!-- <el-transfer class="transfer" :titles="['可选对象', '已选对象']" v-model="value" :data="data"></el-transfer> -->
            <div class="nl">
              <div class="title">
                可选对象
                <el-checkbox
                  style="float: right;"
                  v-model="checked"
                  @change="checkedOn(0)"
                  :disabled="choiceSingle"
                  >全选</el-checkbox
                >
              </div>
              <el-scrollbar class="scrollbar" style="height:100%">
                <div class="searchBox">
                  <el-input
                    placeholder="请输入名字搜索"
                    size="mini"
                    v-model="advanceQuery.keywords"
                    class="input-with-select"
                  >
                    <el-button
                      slot="append"
                      size="mini"
                      icon="el-icon-search"
                      @click="search"
                    ></el-button>
                  </el-input>
                </div>
                <ul v-if="data.length > 0">
                  <li
                    v-for="(item, index) in data"
                    :key="index"
                    v-show="item.show"
                  >
                    <el-radio-group v-model="curRadio" v-if="choiceSingle">
                      <el-radio :label="item.userId">{{
                        item.userName
                      }}</el-radio>
                    </el-radio-group>
                    <el-checkbox
                      v-else
                      class="ellipsis-1"
                      v-model="item.disabled"
                      >{{ item.userName }}</el-checkbox
                    >
                  </li>
                </ul>
                <img
                  class="emptyBox"
                  v-else
                  src="@/assets/images/emptyBox.png"
                  alt
                />
              </el-scrollbar>
              <div class="pagination">
                <el-pagination
                  small
                  layout="prev, pager, next"
                  :total="total"
                  @current-change="getCurrentpage"
                >
                </el-pagination>
              </div>
            </div>
            <div class="arrow">
              <el-button
                icon="el-icon-arrow-left"
                circle
                @click="arrowLeft"
              ></el-button>
              <el-button
                icon="el-icon-arrow-right"
                circle
                @click="arrowRight"
              ></el-button>
            </div>
            <div class="nr">
              <div class="title">
                已选对象
                <el-link type="primary">{{ value.length }}</el-link>
                <el-checkbox
                  style="float: right;"
                  v-model="checked0"
                  @change="checkedOn(1)"
                  >全选</el-checkbox
                >
              </div>
              <el-scrollbar class="scrollbar" style="height:100%">
                <ul v-if="value.length > 0">
                  <li v-for="(item, index) in value" :key="index">
                    <el-checkbox class="ellipsis-1" v-model="item.disabled">{{
                      item.userName
                    }}</el-checkbox>
                  </li>
                </ul>
                <img
                  class="emptyBox"
                  v-else
                  src="@/assets/images/emptyBox.png"
                  alt
                />
              </el-scrollbar>
            </div>
            <p style="clear:both"></p>
            <div style="position: absolute;bottom: 10px;right: 10px;">
              <el-button size="small" type="primary" @click="choiceManOnConfirm"
                >确定</el-button
              >
              <el-button size="small" @click="showState = !showState"
                >取消</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import tree from "@/components/tree.vue";
import partyDyMgrApi from "@/api/partyManage";
export default {
  name: "choiceLeftRight",
  props: {
    showBtn: {
      type: Boolean,
      default: true
    },
    //选单个人开关
    choiceSingle: {
      type: Boolean,
      default: false
    }
  },
  data() {
    // const generateData = (_) => {
    //   const data = [];
    //   for (let i = 1; i <= 20; i++) {
    //     data.push({
    //       key: i,
    //       label: `党员/党组织名称 ${i}`,
    //       //disabled: i % 4 === 0
    //       disabled: false,
    //       show: true,
    //       id: i,
    //     });
    //   }
    //   return data;
    // };
    return {
      checked: false,
      checked0: false,
      data: [],
      value: [],
      showState: false,
      height: 500,
      spanState: "none",
      tagList: [],
      // 高级模糊查询
      advanceQuery: {
        keywords: "", //姓名，手机号，工号模糊查询
        orgCode: "", //组织编码
        userStatus: "1", //	用户状态:1:有效,0:无效-1删除
        pageNumber: 1, //	当前页
        pageSize: 10 //	每页条数
      },
      loading: false,
      total: 0, //分页总数据
      curRadio: "" //当前选中的radio
    };
  },
  components: {
    tree
  },
  watch: {
    "advanceQuery.keywords": function(newVal, oldVal) {
      if (newVal == "") {
        this.getData();
      }
    }
  },
  mounted() {
    this.$store.commit({
      type: "navCurEdit",
      payload: {
        i: 1
      }
    });
  },
  methods: {
    //获取数据
    //获取数据
    getData() {
      let that = this;
      let data = this.advanceQuery;
      this.loading = true;
      that.$http.get(partyDyMgrApi.advancedQuery, data).then(res => {
        this.loading = false;
        if (res.status == 200) {
          this.data = res.data.data.list;
          this.formatData(this.data);
          this.total = res.data.data.totalCount;
        }
      });
    },
    formatData(data) {
      let dataList = JSON.parse(JSON.stringify(data));
      dataList.map((item, index) => {
        item.disabled = false;
        item.show = true;
      });
      this.data = dataList;
    },
    getCurrentpage(page) {
      this.advanceQuery.pageNumber = page;
      this.getData();
    },
    search() {
      if (this.advanceQuery.keywords == "") {
        return;
      }
      this.getData();
    },
    nodeClick(obj) {
      this.advanceQuery.orgCode = obj.orgCode;
      this.getData();
    },
    handleClose(tag) {
      console.log(tag);
      let that = this;
      let arr = [];
      that.value.map((item, index) => {
        if (item.id != tag.id) {
          let data = JSON.stringify(item);
          arr.push(JSON.parse(data));
        }
      });
      that.value = arr;
      that.data.map((item, index) => {
        if (item.id == tag.id) {
          item.show = true;
        }
      });
      //this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    checkedOn(type) {
      let that = this;
      if (type == 0) {
        that.data.map((item, index) => {
          item.disabled = that.checked;
        });
      } else {
        that.value.map((item, index) => {
          item.disabled = that.checked0;
        });
      }
    },

    arrowLeft() {
      let that = this;
      let arr = [];
      that.checked = false;
      that.value.map((item, index) => {
        if (!item.disabled) {
          arr.push(item);
        } else {
          that.data.map((item0, index0) => {
            if (item0.id == item.id) {
              item0.show = true;
              item0.disabled = false;
            }
          });
        }
      });
      that.value = arr;
    },
    arrowRight() {
      let that = this;
      //单选的情况
      if (that.choiceSingle) {
        //选中的需要隐藏
        // this.data.map(item=> {
        //   if (item.userId==that.curRadio) {
        //       item.show = false;
        //   }
        // });
        let obj = that.data.find(v => v.userId == this.curRadio); //单选选中的人
        that.value = [obj];
        return;
      }
      //多选的情况
      let arr = [];
      this.data.map((item, index) => {
        if (item.disabled) {
          item.show = false;
          arr.push(item);
        }
      });
      var c = that.value.concat(arr); //合并成一个数组
      console.log("---ccc", c);
      let temp = {}; //用于id判断重复
      let result = []; //最后的新数组<br>//遍历c数组，将每个item.id在temp中是否存在值做判断，如不存在则对应的item赋值给新数组，并将temp中item.id对应的key赋值，下次对相同值做判断时便不会走此分支，达到判断重复值的目的；
      c.map((item, index) => {
        if (!temp[item.userId]) {
          let data = JSON.stringify(item);
          result.push(JSON.parse(data));
          temp[item.userId] = true;
        }
      });
      that.value = result;
    },
    choiceManOn() {
      this.showState = !this.showState;
    },
    choiceManOnConfirm() {
      if (!this.value.length) {
        this.$message.info("已选对象为空");
        return false;
      }
      this.choiceManOn();
      this.$emit("callBack", this.value);
      this.value = [];
    }
  }
};
</script>

<style lang="less" scoped>
img.emptyBox {
  position: absolute;
  width: 80px;
  left: 50%;
  margin-left: -40px;
  top: 45%;
}
.nl {
  width: 40%;
  float: left;
  margin: 10px;
}
.nr {
  width: 40%;
  float: right;
  margin: 10px;
}
.nl,
.nr {
  height: calc(100% - 109px);
}
.scrollbar {
  overflow: hidden;
  border: 1px solid #ededed;
}
.nr ul,
.nl ul {
  padding: 0 10px;
}
.nr ul li,
.nl ul li {
  line-height: 30px;
  font-size: 12px;
  width: 90%;
}
/deep/ .el-transfer-panel__body,
/deep/ .el-transfer-panel__list {
  height: 310px;
}
/deep/ .el-tag {
  margin-right: 10px;
}
.lump {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
}
/deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}
.choice_box {
  position: fixed;
  width: 1100px;
  height: 90%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border-radius: 2px;
}
.top_tips {
  padding: 0 20px;
  height: 54px;
  line-height: 54px;
  border-bottom: 1px solid rgb(233, 233, 233);
}
.top_tips .tips {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}
.top_tips i {
  font-size: 18px;
  color: #333333;
}
.bot_bot {
  height: calc(100% - 55px);
}
.bot_bot > div {
  height: 100%;
}
.tree_box {
  box-sizing: border-box;
  width: 28%;
  border-right: 1px solid rgb(233, 233, 233);
}
.arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -20px;
  margin-left: -47px;
}
.table_box {
  box-sizing: border-box;
  //padding: 20px;
  width: 72%;
  position: relative;
}
.el-table__body-wrapper {
  min-height: 80% !important;
  background: pink;
}
.search_box {
  margin-bottom: 16px;
}
.el-pagination {
  margin: 30px 0 40px;
}
.all_tri4s {
  width: 100% !important;
  height: 100% !important;
  background: pink;
}
.choice_tree /deep/ .tree {
  position: relative;
  min-width: auto;
  min-height: auto;
  width: 100%;
  height: 100%;
  box-shadow: none;
}
.choice_tree /deep/ .el-scrollbar {
  width: 100% !important;
}
/deep/ .el-transfer__button:first-child {
  margin: 0;
}
/deep/ .el-tree-node__label {
  font-size: 13px;
}
.transfer /deep/ .el-button {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
}
/deep/ .el-transfer__buttons {
  padding: 0 17px;
}
</style>
